<template>
  <div class="guarantee" v-if="guarantee.length>0">
    <div class="brand">{{guarantee[0].desc}}</div>
    <div class="return">{{guarantee[2].desc}}</div>
    <div class="refund">{{guarantee[1].desc}}</div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: 'guarantee',
    computed: {
      ...mapState({
        guarantee: state => state.home.guarantee,
      })
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .guarantee
    height 36px
    width 100%
    display flex
    color #B4282D
    line-height 36px
    text-align center
    padding 15px
    background #fff
    .brand
      flex 1
      background no-repeat url("https://yanxuan.nosdn.127.net/a03dd909803b9ac032eba58b7253a2f6.png") 15px
      background-size 32px 32px
    
    .return
      flex 1
      background no-repeat url("https://yanxuan.nosdn.127.net/2d0402ffcd52b3ec3b07422681c42a89.png")
      background-size 32px 32px
    
    .refund
      flex 1
      background no-repeat url("https://yanxuan.nosdn.127.net/eb61ee48e8942dbd1784c9ee75ebe955.png")
      background-size 32px 32px

</style>
